<template>
    <div class="chart-wrapper">
      <Title :title="title"></Title>
      <div ref="chartContainer" class="chart-container"></div>
    </div>
  </template>
  
  <script>
  import { Bar } from '@antv/g2plot'
  import { get } from '@/utils/request'
  import Title from './Title'
  
  export default {
    components: {
      Title
    },
    data() {
      return {
        title: '工程状态分布',
        chartData: []
      }
    },
    methods: {
      async loadData() {
        try {
          const res = await get('/engineer/pageQuery', { page: 1, pageSize: 1000 })
          if (res && res.data && res.data.list) {
            // 统计各状态数量
            const statusCount = {
              '未绑定': 0,
              '监测中': 0,
              '已结束': 0
            }
            
            res.data.list.forEach(item => {
              if (statusCount.hasOwnProperty(item.status)) {
                statusCount[item.status]++
              }
            })
            
            // 转换为图表数据格式
            this.chartData = Object.entries(statusCount).map(([type, value]) => ({
              type,
              value
            }))
            
            this.renderChart()
          }
        } catch (error) {
          console.error('获取工程状态统计失败:', error)
        }
      },
      renderChart() {
        const chart = new Bar(this.$refs.chartContainer, {
          data: this.chartData,
          xField: 'value',
          yField: 'type',
          seriesField: 'type',
          color: ({ type }) => {
            const colors = {
              '监测中': '#a8e6cf',
              '未绑定': '#ffb7b2',
              '已结束': '#ffd3b6'
            }
            return colors[type] || '#d4d4d4'
          },
          label: {
            position: 'right',
            style: {
              fill: '#666666',
              fontSize: 14,
              fontWeight: 500
            },
            formatter: (datum) => `${datum.value} 个`
          },
          legend: {
            position: 'top',
            itemName: {
              style: {
                fill: '#666666',
                fontSize: 12
              }
            },
            marker: {
              symbol: 'square',
              style: {
                r: 4,
                lineWidth: 0
              }
            }
          },
          xAxis: {
            grid: {
              line: {
                style: {
                  stroke: '#f0f0f0',
                  lineWidth: 1,
                  lineDash: [4, 4]
                }
              }
            },
            label: {
              autoHide: true,
              autoRotate: false,
              style: {
                fill: '#999999',
                fontSize: 12
              }
            }
          },
          yAxis: {
            label: {
              autoHide: false,
              autoRotate: false,
              style: {
                fill: '#666666',
                fontSize: 12
              }
            },
            line: {
              style: {
                stroke: '#f0f0f0',
                lineWidth: 1
              }
            }
          },
          minBarWidth: 20,
          maxBarWidth: 30,
          marginRatio: 0.2,
          animation: {
            appear: {
              animation: 'fade-in',
              duration: 800
            },
            update: {
              duration: 400
            }
          },
          interactions: [
            { type: 'element-active' }
          ],
          barStyle: {
            radius: [4, 4, 4, 4],
            fillOpacity: 0.85
          },
          padding: [20, 50, 20, 50],
          appendPadding: [0, 0, 10, 0],
          barBackground: {
            style: {
              fill: '#f8f8f8',
              fillOpacity: 0.2
            }
          },
          theme: {
            backgroundStyle: {
              fill: '#ffffff'
            }
          },
          state: {
            active: {
              style: {
                fillOpacity: 0.95,
                stroke: '#000',
                lineWidth: 1
              }
            }
          }
        })
  
        chart.render()
      }
    },
    mounted() {
      this.loadData()
      // 每30秒刷新一次数据
      setInterval(() => {
        this.loadData()
      }, 30000)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .chart-wrapper {
    height: 100%;
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
  }
  
  .chart-container {
    flex: 1;
    min-height: 250px;
    border-radius: 8px;
    overflow: hidden;
  }
  </style>